<template>
    <div class="bground" style="flex-direction: column; align-items: center;">
    <el-form
            label-position="top"
            label-width="100px"
            class="custom-form"
            style="max-width: 460px;"
            :rules="rules"
            :model="userInfo"
    >
        <el-form-item label="账号" prop="username" >
            <el-input v-model="userInfo.username"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input v-model="userInfo.phone" />
        </el-form-item>
        <el-form-item label="验证码" prop="code">
            <el-input v-model="userInfo.code" >
                <template #append>
                    <el-button type="primary"  :disabled="disabled" @click="sendmsg" size="medium" class="fixed-size-button">{{buttonText}}</el-button>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
            <el-input v-model="userInfo.password" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="btnSubmit" style="margin-left: 120px;margin-top: 30px">提交</el-button>
        </el-form-item>
    </el-form>

    </div>
</template>

<script setup>
    import {onMounted, reactive, ref} from 'vue'
    import {useStore} from 'vuex'
    import {useRouter} from 'vue-router'
    import {identityAuthentication,getCodemsgLogin} from "../api/AliyunSms";
    import {watch} from "@vue/runtime-core";
    import {ElMessage} from "element-plus";
    import {check} from "../api/user";

    const userInfo=ref({
        username:'',
        phone:'',
        code:'',
        password:'',
    })
    const store = useStore()
    const router = useRouter()

    const buttonText=ref("点击获取验证码")
    const disabled=ref(false)

    const result=ref(false)

    const countDown=ref(60)

    const msg=ref('')

    //发送验证码
    const sendmsg=()=>{
        disabled.value=true
        buttonText.value=countDown.value+"秒"

        //获取验证码
        identityAuthentication({phone:userInfo.value.phone}).then(res=>{
            msg.value=res.data
        })
        //时间管理大师
        let timer=setInterval(()=>{
            countDown.value--;
            if(countDown.value<=0){
                clearInterval(timer)
                disabled.value=false;
                buttonText.value="点击获取验证码"
                countDown.value=60
                return
            }else{
                buttonText.value=countDown.value+"秒"
            }
        },1000)
    }

    watch(()=>userInfo.value.code,(newValue,oldValue)=>{
        if(newValue === msg.value){
            result.value=true
        }else{
            result.value=false
        }
    },{deep:true})


    const rules=reactive({
        phone: [
            { required: 'true', message: '手机号不能为空', trigger: 'blur' },
            { min:11,max:11, message: '请输入正确的手机号', trigger: 'blur' },
        ],
        code: [
            { required: 'true', message: '验证码不能为空', trigger: 'blur' }
        ],
        username: [
            { required: 'true', message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
            { required: 'true', message: '密码不能为空', trigger: 'blur' },
            { min:4,max:11, message: '密码长度应该4-11之间', trigger: 'blur' },
        ],

    });

    const btnSubmit=()=>{
        if(result.value==false){
            ElMessage({
                message: '验证码错误！',
                type: 'error',
            })
        }else{
            check({username:userInfo.value.username,password:userInfo.value.password,phone:userInfo.value.phone}).then(res=>{
                ElMessage({
                    message: '密码重置成功！',
                    type: 'success',
                })
            })

        }
    }



</script>

<style scoped>
    .bground{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        /*background-color:#f5f5f5;*/
        border: 1px solid #ccc;
        border-radius: 10px;
        background-image: url('../views/slider-pic/bizhi4.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .custom-form {
        background-color: rgba(0, 128, 255, 0.1);
        padding: 80px;
        border-radius: 30px;
        flex-direction: column;
        align-items: center;
    }
    .fixed-size-button {
        width: 130px; /* 设置按钮的宽度 */
        height: 40px; /* 设置按钮的高度 */
    }
</style>